<template>
	<link href="/assets/css/reset.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="/assets/css/login.css" />
	<div class="limiter">
		<div class="container-login100">
			<div class="wrap-login100">
				<van-form @submit="onSubmit" class="login100-form validate-form">
					<div class="login100-form-avatar">
						<img src="/assets/images/pexels-spencer-selover-428364.jpg" />
					</div>

					<div class="wrap-input100 validate-input">
						<van-field
							v-model="business.mobile"
							name="mobile"
							label="手机号"
							placeholder="请输入手机号码"
							:rules="rules.mobile" />
					</div>

					<div class="wrap-input100 validate-input">
						<van-field
							v-model="business.password"
							type="password"
							name="password"
							label="密码"
							placeholder="请输入密码"
							:rules="rules.password" />
					</div>

					<div class="container-login100-form-btn">
						<van-button class="login100-form-btn my-btn" round block native-type="submit">注 册</van-button>
					</div>

					<div class="action">
						<router-link :to="{ name: 'Register' }" class="txt1">立即登录 ></router-link>
					</div>
				</van-form>
			</div>
		</div>
	</div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();

const business = reactive({
	mobile: '',
	password: '',
});

const rules = {
	mobile: [
		{ required: true, message: '请输入手机号' },
		{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误' },
	],
	password: [{ required: true, message: '请输入密码' }],
};

async function onSubmit() {
	const data = {
		mobile: business.mobile,
		password: business.password,
	};

	const result = await proxy.$POST({
		url: '/business/register',
		params: data,
	});

	if (result.code === 0) {
		proxy.$fail(result.msg);
		return false;
	}

	proxy.$success({
		message: result.msg,
		duration: 1000,
		onClose: () => proxy.$router.push(result.url),
	});
}
</script>

<style scoped>
.my-btn::before {
	left: 50%;
	top: 50%;
}
</style>
